<template>
  <video
      id="my-video"
      ref="videoPlayer"
      class="video-js vjs-default-skin"
      controls
      controlBtns="['volume', 'fullScreen']"
      webFullScreen="true"
      muted="true"
      preload="auto"
      width="500px"
  >
    <source :src="srcUrl" />
  </video>
</template>

<script setup lang="ts" name="VideoPlay">
import { onMounted, ref, defineProps, defineEmits } from "vue";
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const videoPlayer = ref(null);
const srcUrl = ref(null)
const props = defineProps(["srcUrl"]);
const emits = defineEmits(['playComplete'])

srcUrl.value = props.srcUrl

onMounted(() => {
  videojs(
      videoPlayer.value,
      {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        // controlBar: true,
        controlBar: {
          volumePanel: {
            inline: false // 将音量控制面板放在垂直位置
          },
          playToggle: false, // 控制播放/暂停按钮的显示与隐藏。
          progressControl: false, // 控制进度条的显示与隐藏。
          remainingTimeDisplay: false, // 控制剩余时间显示的显示与隐藏。
          fullscreenToggle: true, // 控制全屏按钮的显示与隐藏。
          playbackRateMenuButton: false, // 控制播放速度菜单按钮的显示与隐藏。
          chaptersButton: false, // 控制章节按钮的显示与隐藏
          subtitlesButton: false, // 控制字幕按钮的显示与隐藏。
          captionsButton: false, // 控制标题按钮的显示与隐藏。
          pictureInPictureToggle: false, // 控制画中画按钮的显示与隐藏。
        },
        // disablePictureInPicture: true,
        autoplay: true,
      },
      function() {
        this.play();
        emits('playComplete', false)
      }
  );
})

</script>

<style scoped lang="scss">

</style>
